<!DOCTYPE html>
<html
  xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户管理 - SimpleHire</title>
    <link
      th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}"
      rel="stylesheet"
    />
    <link th:href="@{/css/style.css}" rel="stylesheet" />
    <link
      th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}"
      rel="stylesheet"
    />
  </head>
  <body>
    <div th:replace="~{fragments/header :: header}"></div>

    <main class="container mt-4">
      <div class="row">
        <div class="col-12">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>用户管理</h2>
            <a th:href="@{/dashboard}" class="btn btn-secondary">
              <i class="fas fa-arrow-left me-1"></i> 返回仪表板
            </a>
          </div>

          <!-- 消息提示 -->
          <div
            th:if="${param.success}"
            class="alert alert-success alert-dismissible fade show"
            role="alert"
          >
            <span th:text="${param.success}"></span>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="alert"
              aria-label="Close"
            ></button>
          </div>
          <div
            th:if="${param.error}"
            class="alert alert-danger alert-dismissible fade show"
            role="alert"
          >
            <span th:text="${param.error}"></span>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="alert"
              aria-label="Close"
            ></button>
          </div>

          <!-- 用户列表 -->
          <div class="card">
            <div class="card-header bg-light">
              <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">系统用户列表</h5>
                <span
                  class="badge bg-primary"
                  th:text="${#lists.size(users)} + ' 个用户'"
                ></span>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table-responsive">
                <table class="table table-hover table-striped mb-0">
                  <thead class="table-dark">
                    <tr>
                      <th>ID</th>
                      <th>用户名</th>
                      <th>姓名</th>
                      <th>邮箱</th>
                      <th>角色</th>
                      <th>状态</th>
                      <th>注册时间</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="user : ${users}">
                      <td th:text="${user.id}"></td>
                      <td th:text="${user.username}"></td>
                      <td
                        th:text="${user.fullName != null} ? ${user.fullName} : '未设置'"
                      ></td>
                      <td th:text="${user.email}"></td>
                      <td>
                        <span
                          th:each="role : ${user.roles}"
                          class="badge me-1"
                          th:classappend="${role == T(com.simplehire.model.UserRole).ADMIN} ? 'bg-danger' : 
                                                                  (${role == T(com.simplehire.model.UserRole).HR} ? 'bg-primary' : 'bg-secondary')"
                          th:text="${role}"
                        >
                        </span>
                      </td>
                      <td>
                        <span th:if="${user.isActive}" class="badge bg-success"
                          >激活</span
                        >
                        <span
                          th:unless="${user.isActive}"
                          class="badge bg-danger"
                          >禁用</span
                        >
                      </td>
                      <td
                        th:text="${#temporals.format(user.createdAt, 'yyyy-MM-dd HH:mm')}"
                      ></td>
                      <td>
                        <div class="btn-group btn-group-sm">
                          <a
                            th:href="@{'/admin/users/edit/' + ${user.id}}"
                            class="btn btn-outline-primary"
                          >
                            <i class="fas fa-edit"></i> 编辑
                          </a>
                          <button
                            th:if="${user.id != currentUser.id}"
                            th:attr="data-bs-toggle='modal', 
                                                                 data-bs-target='#deleteModal',
                                                                 data-userid=${user.id},
                                                                 data-username=${user.username}"
                            class="btn btn-outline-danger delete-btn"
                          >
                            <i class="fas fa-trash"></i> 删除
                          </button>
                          <button
                            th:if="${user.id != currentUser.id}"
                            th:attr="data-bs-toggle='modal', 
                                                                 data-bs-target='#resetPasswordModal',
                                                                 data-userid=${user.id},
                                                                 data-username=${user.username}"
                            class="btn btn-outline-warning reset-btn"
                          >
                            <i class="fas fa-key"></i> 重置密码
                          </button>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 删除确认模态框 -->
    <div
      class="modal fade"
      id="deleteModal"
      tabindex="-1"
      aria-labelledby="deleteModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <p>
              确定要删除用户
              <span id="deleteUsername" class="fw-bold"></span>
              吗？此操作不可逆。
            </p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <form
              th:action="@{'/admin/users/delete/' + ${userId}}"
              method="post"
              id="deleteForm"
            >
              <button type="submit" class="btn btn-danger">确认删除</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 重置密码模态框 -->
    <div
      class="modal fade"
      id="resetPasswordModal"
      tabindex="-1"
      aria-labelledby="resetPasswordModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="resetPasswordModalLabel">重置密码</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <p>
              确定要将用户
              <span id="resetUsername" class="fw-bold"></span> 的密码重置为
              "123456" 吗？
            </p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <form
              th:action="@{'/admin/users/reset-password/' + ${userId}}"
              method="post"
              id="resetForm"
            >
              <button type="submit" class="btn btn-warning">确认重置</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div th:replace="~{fragments/footer :: footer}"></div>
    <!-- Flash 消息提示 -->
    <div
      th:if="${success}"
      class="alert alert-success alert-dismissible fade show"
      role="alert"
    >
      <span th:text="${success}"></span>
      <button
        type="button"
        class="btn-close"
        data-bs-dismiss="alert"
        aria-label="Close"
      ></button>
    </div>
    <div
      th:if="${error}"
      class="alert alert-danger alert-dismissible fade show"
      role="alert"
    >
      <span th:text="${error}"></span>
      <button
        type="button"
        class="btn-close"
        data-bs-dismiss="alert"
        aria-label="Close"
      ></button>
    </div>

    <!-- URL 参数消息提示 (保留兼容性) -->
    <div
      th:if="${param.success}"
      class="alert alert-success alert-dismissible fade show"
      role="alert"
    >
      <span th:text="${param.success}"></span>
      <button
        type="button"
        class="btn-close"
        data-bs-dismiss="alert"
        aria-label="Close"
      ></button>
    </div>
    <div
      th:if="${param.error}"
      class="alert alert-danger alert-dismissible fade show"
      role="alert"
    >
      <span th:text="${param.error}"></span>
      <button
        type="button"
        class="btn-close"
        data-bs-dismiss="alert"
        aria-label="Close"
      ></button>
    </div>
    <script
      th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"
    ></script>
    <script th:src="@{/webjars/font-awesome/6.4.0/js/all.min.js}"></script>
    <script>
      // 删除确认模态框
      document.addEventListener("DOMContentLoaded", function () {
        var deleteButtons = document.querySelectorAll(".delete-btn");

        deleteButtons.forEach(function (button) {
          button.addEventListener("click", function () {
            var userId = this.getAttribute("data-userid");
            var username = this.getAttribute("data-username");

            document.getElementById("deleteUsername").textContent = username;
            document.getElementById("deleteForm").action =
              "/admin/users/delete/" + userId;
          });
        });

        // 重置密码模态框
        var resetButtons = document.querySelectorAll(".reset-btn");

        resetButtons.forEach(function (button) {
          button.addEventListener("click", function () {
            var userId = this.getAttribute("data-userid");
            var username = this.getAttribute("data-username");

            document.getElementById("resetUsername").textContent = username;
            document.getElementById("resetForm").action =
              "/admin/users/reset-password/" + userId;
          });
        });
      });
    </script>
  </body>
</html>
